<template>
	<view class="share clearfix">
		<cu-custom bgColor="bg-transparent text-white" :isBack="isShare"></cu-custom>
		<image src="/static/my/share-bg.png" class="fx-bg" mode=""></image>
		<image src="/static/my/share-text.png" class="share-text" mode=""></image>
		<view class="qrmargin por">
			
			<!-- 这里二维码 -->
			<view class="qrcodehidden">
				<tkiQrcod cid="qrcode" 
				@result="result" 
				ref="qrcode" 
				:val="qrcode" 
				onval 
				:size="270" 
				:showLoading="false" 
				/></view>
		</view>
		
		<view class="share-box flex flex-direction align-center">
			<image src="/static/my/share-box.png" class="share-bix" mode=""></image>
			<view class="por share-qrpic discenter">
				<image class="share-qrpics" :src="qrcodeImg"></image>
			</view>
			<view class="por flex align-center justify-between mt20 text-white">
				<view>我的邀请码:<text class="f20">{{code}}</text></view>
				<view class="button-shares fwb ml10 discenter" @click="copy(code)">复制</view>
			</view>
			<view class="button-share f20 fwb discenter" @click="saveIamge" data-provider="save" data-scene="">保存图片</view>
		</view>
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import share from '@/mixins/share'
import tkiQrcod from 'tki-qrcode'
export default {
	mixins: [share],
	components: { tkiQrcod },
	data() {
		return {
			isShare: true,
			qrcode: '',
			qrcodeImg: '',
			code: '',
			navbarColor: true,
		}
	},
	onLoad() {
		this.getQrcode()
		this.getData()
	},  
	onShow() {},
	methods: {
		async getQrcode() {
			let [err, res] = await uni.getStorage({ key: 'shareImg' })
			res && (this.qrcodeImg = res.data)
		},
		//这里二维码
		result(e) {
			uni.setStorage({ key: 'shareImg', data: e })
			this.qrcodeImg = e
		},
		//这里二维码
		saveIamge(e) {
			this.isShare = false
			this.share(e)
		},
		async getData() {
			let {
				data: { qrcode, code }
			} = await this.$http.post('user.share', {}, { tipConfig: { storeBlock: true } })
			this.code = code
			this.qrcode = qrcode
		}
	}
}
</script>

<style lang="less">
.qrmargin{
	margin-top: calc(50vh + var(--status-bar-height) - 200rpx);
	margin-left: calc(50% - 135rpx);
} 
.share-text{
	width: 680rpx;
	height: 216rpx;
	margin-left: calc(50% - 340rpx);
	margin-top: 40rpx;
}
.share-box{
	width: 720rpx;
	height: 720rpx;
	position: absolute;
	bottom: 34rpx;
	left: 15rpx;
}
.share-bix{
	width: 720rpx;
	height: 720rpx;
	position: absolute;
}
.qrtext{
	color: #FF0E0E;
}
.qrbutton{
	width: 300rpx;
	height: 80rpx;
	border-radius: 10rpx;
	position: fixed;
	z-index: 1;
	bottom: 80rpx;
	right: calc(50% - 150rpx);
	color: #F83632;
}
.share-qrpic{
	margin-top: 150rpx;
	width: 280rpx;
	height: 280rpx;
	background-color: #FFFFFF;
}
.button-share{
	background-color: #F3DD64;
	color: #DA0E17;
	position: relative;
	z-index: 1;
	width: 360rpx;
	height: 80rpx;
	border-radius: 60rpx;
	margin-top: 60rpx;
}
.button-shares{
	background-color: #F3DD64;
	color: #DA0E17;
	position: relative;
	z-index: 1;
	width: 120rpx;
	height: 60rpx;
	border-radius: 60rpx;
}
.share-qrpics{
	width: 240rpx;
	height: 240rpx;
}
.por{
	position: relative;
}
.fx-bg{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
}
.block135{
	width: 270rpx;
	height: 270rpx;
	background-color: #FFFFFF !important;
}
.share-end{
	position: fixed;
	bottom: 75rpx;
	width: 650rpx;
	left: calc(50% - 325rpx);
}
.block130{
	width: 220rpx;
	height: 220rpx;
}
.share-button{
	background-color: #FFFFFF;
	width: 300rpx;
	height: 80rpx;
	border-radius: 10rpx;
}
.nshare{
	width: 300rpx;
	height: 80rpx;
	border-radius: 10rpx;
}
.copy-button{
	width: 116rpx;
	height: 52rpx;
	background-color: #FFD700;
	color: #000000;
}
.yq-box{
	width: calc(100% - 200rpx);
}
.share { 
	&-title {
		width: 320rpx;
		height: 130rpx;
	}
	&-content {
		height: 754rpx;
		width: 660rpx;
		//background: url('~@/static/user/con_share@2x.png') no-repeat;
		background-size: 100% 100%;
		.share-code {
			height: 150rpx;
			margin-top: 50rpx;
		}
		.qrcode {
			&-img {
				display: block;
				width: 300rpx;
				height: 300rpx;
			}
			&-hidden {
				width: 0;
				height: 0;
				overflow: hidden;
			}
		}
	}

	
}
.qrcodehidden{
	width: 0;
	height: 0;
	overflow: hidden;
}
.share-card{
	position: relative;
	width: 100%;
	height: 310rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
}

</style>
